import React from 'react';
import { StyleSheet, Text, View ,Button,FlatList,Image} from 'react-native';
import {getPageFlatListData} from "./testServer/FlatListDataServer";


const FlatListItem = props =>{
  const{item} = props;
  return (
    <View>
      <Image source={{uri:item.avatar}} style={{width:100,height:100}}  />
      <Text>{item.name}</Text>
      <Image source={{uri:item.img}} style={{width:300,height:300}}  />
      <Text>{item.text}</Text>
    </View>
  )
}


export default class App extends React.Component {
  state={
      flatListDataFromServer:[],
      page:1
    };
  makeRemoteRequest = () => {
    getPageFlatListData({ page:this.state.page }).then(data => {
      console.log(444,data);
      this.setState({
        flatListDataFromSever:data
      })
      console.log(555,this.state.flatListDataFromSever);
    })
  }
  componentDidMount(){
    this.makeRemoteRequest();
  }
  _keyExtractor = (item, index) => item.id.toString();
  render() {
    return (
      <View style={styles.container}>

        <Button title="getData" onPress={this.makeRemoteRequest}/>
        <FlatList
          keyExtractor={this._keyExtractor}
          data={this.state.flatListDataFromSever}
          renderItem={({item,index}) => {
            return <FlatListItem item={item} index={index} />
          }}  
       
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
});
